<template>
  <div class="app-container">
    <Toolbar />
    <div class="main-content">
      <ControlPanel />
      <DesignArea :paper-size="paperSize" :is-landscape="isLandscape" @control-selected="handleControlSelected" />
      <PropertyPanel @update-paper-size="handlePaperChange" :selected-control="selectedControl" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Toolbar from './components/Toolbar.vue';
import ControlPanel from './components/ControlPanel.vue';
import DesignArea from './components/DesignArea.vue';
import PropertyPanel from './components/PropertyPanel.vue';

const paperSize = ref({ width: 240, height: 110 });
const isLandscape = ref(true);
const selectedControl = ref(null);

const handleControlSelected = (control) => {
  selectedControl.value = control;
};

const handlePaperChange = (newSize) => {
  console.log(newSize);
  paperSize.value = {
    width: newSize.width,
    height: newSize.height
  };
  isLandscape.value = newSize.isLandscape;
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
  border: none;
}

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}
</style>